<!--问题详情-->
<template>
    <scroller>
        <div class="m-issuesInfo">
            <div class="layout-1">开启账户是否收费，有没有最低资金要求？</div>
            <div class="layout-2">
                <p>在本公司开户不收费。开立迷你账户最低只需50美元。</p>
            </div>
            <div class="layout-3">
                <div class="words">是否对您有帮助：</div><div class="icons">
                    <div class="avail" @click="avail(1)">
                        <i class="icon-kf_question_yes"></i>
                        <span>有用</span>
                    </div>
                    <div class="unavail" @click="avail(0)">
                        <i class="icon-kf_question_no"></i>
                        <span>没用</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-issues">
            <div class="layout-1">相关问题</div>
            <issuess></issuess>
        </div>
    </scroller>
</template>

<script>
    import axios from "axios";
    import cgi from "@/common/cgi";
    import issuess from "@/components/issuess.vue";
    export default {
        name: 'Content',
        components: {issuess},
        data() {
            return {
                show: true,
            };
        },
        methods:{
            avail(num){
                console.log(num)
                $toast.show('反馈成功')
            }
        },
        created() {
        }
    };
</script>

<style lang="scss" type="text/scss">
    @import "./../../scss/mixin";
    @import "./../../scss/variables";
    .m-issuesInfo {
        padding: px2rem(30);
        border-bottom: solid $bg-colorA px2rem(18);
        color: $f-colorA;
        .layout-1 {
            font-size: px2rem(56);
            line-height: px2rem(84);
            word-break: break-all;
            margin-bottom: px2rem(50);
        }
        .layout-2 {
            p {
                font-size: px2rem(34);
                line-height: px2rem(60);
            }
            img {
                margin: px2rem(35) 0;
            }
        }
        .layout-3 {
            >div {
                vertical-align: middle;
            }
            .words {
                display: inline-block;
                line-height: px2rem(36);
                font-size: px2rem(26);
                color: $f-colorC;
            }
            .icons {
                color: $f-colorD;
                display: inline-block;
                margin-left: px2rem(40);
            }
            .avail,.unavail {
                display: inline-block;
                width: px2rem(180);
                height: px2rem(64);
                text-align: center;
                font-size: px2rem(26);
                background-color: $bg-colorD;
                border-radius: px2rem(100);
                i {
                    position: relative;
                    top:px2rem(4);
                    font-size: px2rem(56);
                    margin-left: px2rem(10);
                }
                span {
                    position: relative;
                    top: px2rem(-10);
                }
            }
            .unavail {
                margin-left: px2rem(60);
                background-color: $bg-colorF;
            }
        }
    }
    .m-issues {
        border-top: solid px2rem(18) $bg-colorA;
        padding-left: px2rem(32);
        .layout-1 {
            font-size: px2rem(32);
            color: $f-colorA;
            font-weight: 500;
            padding: px2rem(40) 0 px2rem(8) 0;
        }
    }
</style>

